<template>
  <div class="homeWrap" @scroll="onScrollChange">
    <!-- <home-header :city="city"></home-header> -->
    <navBar :navBarStyle="navBarStyle">
      <!-- // 左侧插条 -->
      <template v-slot:nav-left>
        <img :src="navBarCurrnetSlotStyle.leftIcon" alt="">
      </template>
      <!-- // 中间插条 -->
      <template v-slot:nav-center>
        <search :bgColor="navBarCurrnetSlotStyle.search.bgColor" :hintColor="navBarCurrnetSlotStyle.search.hintColor" :icon="navBarCurrnetSlotStyle.search.icon"></search>
      </template>
      <!-- // 右侧插条 -->
      <template v-slot:nav-right>
        <img :src="navBarCurrnetSlotStyle.rightIcon" alt="">
        <!-- <img src="http://imooc.hybrid.lgdsunday.club/img/message-white.c 3369297.svg" alt=""> -->
      </template>
    </navBar>
    <home-swiper :list="swiperList"></home-swiper>
    <home-icons :list="iconList"></home-icons>
    <home-recommend :list="recommendList"></home-recommend>
    <home-more></home-more>
    <home-weekend :list="weekendList"></home-weekend>
    <home-more></home-more>
  </div>
</template>
<script>
import HomeHeader from './components/header'
import HomeSwiper from './components/Swiper'
import HomeIcons from './components/Icons'
import HomeRecommend from './components/Recommend'
import HomeWeekend from './components/Weekend'
import HomeMore from './components/More'
import NavBar from '@/pages/currency/NavigationBar'
import Search from '@/pages/currency/Search'
import axios from 'axios'
export default {
  name: 'Home',
  data () {
    return {
      city: '',
      hotCities: [],
      iconList: [],
      recommendList: [],
      weekendList: [],
      swiperList: [],
      // navbar 插槽样式数据，包含页面开始未滑动的时候插槽的样式 和 页面滑动后的样式
      navBarSlotStyle: {
        normal: {
          // 左侧插槽
          leftIcon: require('@img/菜单.png'),
          // 中间插槽
          search: {
            bgColor: '#ffffff',
            hintColor: '#999999',
            icon: require('@img/搜索高亮.png')
          },
          // 右侧插槽
          rightIcon: require('@img/消息.png')
        },
        highlight: {
          // 左侧插槽
          leftIcon: require('@img/菜单高亮.png'),
          // 中间插槽
          search: {
            bgColor: '#d7d7d7',
            hintColor: '#ffffff',
            icon: require('@img/搜索.png')
          },
          // 右侧插槽
          rightIcon: require('@img/消息高亮.png')
        }
      },
      // navBar 当前使用的插槽样式
      navBarCurrnetSlotStyle: {},
      // navBar 的定制样式
      navBarStyle: {
        position: 'fixed',
        backgroundColor: ' '
      },
      // 记录页面滚动值
      scrollTopValue: -1,
      // 锚点
      ANCHOR_SCROLL_TOP: 160
    }
  },
  components: {
    HomeHeader: HomeHeader,
    HomeSwiper,
    HomeIcons,
    HomeRecommend,
    HomeWeekend,
    HomeMore,
    'navBar': NavBar,
    'search': Search
  },
  methods: {
    getHomeInfo () {
      // axios.get('./api/index.json')
      // 回调方式
      // axios.get('./static/mock/index.json')
      //   .then(this.getHomeInfoSucc)
      //
      axios.get('./api/index.json')
        .then(res => {
          res = res.data
          if (res.ret && res.data) {
            const data = res.data
            this.city = data.city
            this.swiperList = data.swiperList
            this.iconList = data.iconList
            this.recommendList = data.recommendList
            this.weekendList = data.weekendList
            console.log(data.iconList)
          }
        }).catch(err => {
          console.log('错误' + err)
        })
    },
    getHomeInfoSucc (res) {
      res = res.data
      if (res.ret && res.data) {
        const data = res.data
        this.city = data.city
        this.swiperList = data.swiperList
        this.iconList = data.iconList
        this.recommendList = data.recommendList
        this.weekendList = data.weekendList
        console.log(data.iconList)
      }
    },
    // 监听页面滚动距离
    onScrollChange: function ($event) {
      this.scrollTopValue = $event.target.scrollTop // 获取当前页面滚动距离
      // 计算透明度
      let opacity = this.scrollTopValue / this.ANCHOR_SCROLL_TOP
      this.navBarStyle.backgroundColor = 'rgba(255,255,255,' + opacity + ')'
      // 指定插槽样式
      if (opacity >= 1) {
        this.navBarCurrnetSlotStyle = this.navBarSlotStyle.highlight
      } else {
        this.navBarCurrnetSlotStyle = this.navBarSlotStyle.normal
      }
    }
  },
  created () {
    this.navBarCurrnetSlotStyle = this.navBarSlotStyle.normal
  },
  mounted () {
    this.getHomeInfo()
  },
  // 当页面重新显示的时候执行
  activated () {
    console.log('activated')
    this.getHomeInfo()
  }
}
</script>
<style lang="stylus" scoped>
.homeWrap
  height 100%
  overflow auto
</style>
